<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">

<title>收银台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=1190">
<link type="text/css" href="./static/css/tts.css" rel="stylesheet">
<link type="text/css" href="./static/css/orderpay.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /* 填写信用卡信息 */
        .checkout-car-box {
            padding: 40px 30px 20px 30px;
            z-index: 100;
        }
        .checkout-car-box.hq-shadow-box label {
            color: #333;
        }
        .checkout-car-box .frame--activated {
            border-color: #e5e5e5;
            box-shadow: none;
        }
        .checkout-car-box .frame--activated.frame--focus {
            border-color: #49f;
            box-shadow: 0px 2px 5px 0px rgba(8, 40, 57, 0.15);
        }
        /* 填写信用卡信息 end */
        .h-lh34 { height:34px; line-height: 34px }
        .pay-split-select li.clicked .pay-card-item-available .pay-card-clicked {display: block;}
        .pay-split-select li:not(.clicked) { border: 1px solid #fff; }
        .pay-split-select .order-pay-card-item {
            padding: 0 0 0 10px;
        }
        .pay-split-select li.clicked .order-pay-card-item {background: #eef6ff;}
        .pay-split-select li.clicked .pay-card-item-available {border: 2px #49f solid;}
        .pay-split-select li .pay-status {
            width: 120px;
        }
    </style>
<script src="./static/js/push.js"></script><script type="text/javascript" src="./static/js/jquery.mini.js"></script>
<script type="text/javascript" src="./static/js/main.js"></script>
<script type="text/javascript" src="./static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="./static/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="./static/js/common_language.js"></script>
<style></style></head>
<body class="bg-fff">
<link rel="stylesheet" type="text/css" href="./static/css/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/css/global.css">
<div id="tips_bg" class="hide abs" style="height: 927px;">
    <div class="tips_div rel f16">
        <p class="tips_head f16 rel t-fff">提示</p>
        <div class="tips_body clearfix">
            <div class="tips_img fl"><img src="./static/tk_ts_icon_new.svg"></div>
            <div class="tips_conent fl">尊敬的客户，当前浏览器版本过低，将会影响您的预订体验，建议更新版本或更换浏览器使用。</div>
        </div>
        <div class="tips_footer tac">
            <a href="javascript:;" class="tips_button dib J_tips_button">我知道了</a>
        </div>
    </div>
</div>
<div class="header-wrap bg-fff w100p hq_header_wrap">
    <div class="hq_header_top w clearfix h100p">
        <div class="header-logo fl dif aic h100p">
            <a class="J_token logo-href db dif aic" href="/index.html" title="好巧网">
                <img class="db" src="./img/logo.png" height="59">
                <div class="header-logo-spe"></div>
                <span class="header-logo-name f26 t-49f">收银台</span>
            </a>
        </div>
        <div class="fr h100p pr10" style="padding-top: 16px">
        </div>
    </div>
</div>
<script type="text/javascript" src="./static/js/header.js"></script>
<div class="main-pay order-pay-main" style="min-height: 500px;">
    <!-- 订单 -->
    <div class="order-pay-cont">
        <ul class="order-pay-item-box" id="J-order-pay-item-box" style="height: auto;margin-bottom:2px;">
            <!-----酒店（1）----->
            <li class="order-pay-item" data-num="1">
                <h6 class="order-item-title">
                    <span class="order-item-title-cn">{{orderInfo.hotel_name}}</span>
                </h6>
                <div class="order-item-info">
                    <em>订单号：{{orderInfo.dist_order_sn}}</em>
                    <span class="segment-line"></span>
                    <em>费用类型：房费</em>
                    <span class="segment-line"></span>
                    <em>入离日期：{{orderInfo.in_date}}至 {{orderInfo.out_date}}</em>
                    <span class="segment-line"></span>
                </div>
                <div class="order-item-info">
                    <em>房型：{{orderInfo.room_type_name}}&nbsp;/</em>
                    <!--是否包含早餐,1包含,2不包含,3含双早,4含三早,5有(收费)-->
                    <em v-if="orderInfo.has_bread_fast == 1"><i>含餐</i></em>
                    <em v-if="orderInfo.has_bread_fast == 2"><i>不含餐</i></em>
                    <em v-if="orderInfo.has_bread_fast == 3"><i>含双早</i></em>
                    <em v-if="orderInfo.has_bread_fast == 4"><i>含三早</i></em>
                    <em v-if="orderInfo.has_bread_fast == 5"><i>有餐（收费）</i></em>
                    <span class="segment-line"></span>
                    <em>间夜数：x{{params.room_number}}间</em>
                </div>
                <div class="order-item-info" style="cursor: pointer;" v-for="item in orderInfo.stay_person">
                    <em>入住人姓名：</em>
                    <em class="J-pay-card-tip-show">{{item.person_name}}</em>
                    <span class="segment-line"></span>
                    <em>入住人电话：{{item.person_mobile}}</em>
                </div>
                <em class="order-item-total"><span style="color:#666">应付金额：</span>
                    <span class="pay-money-color"> {{orderInfo.price}}元</span>
                </em>
            </li>
        </ul>
        <div class="order-pay-total">
            订单总额：
            <em class="pay-money-color font-bold"> {{orderInfo.price}}元</em>
        </div>
    </div>
    <!-- 订单 end-->
        <!-- time -->
    <div class="order-pay-countdown" style="display: none">
        <i class="order-pay-icon time-count-down-icon"></i>支付剩余有效时间：<span class="color-5256 font-bold J-time-count">14分17秒</span>，请及时完成付款
    </div>
    <!-- time end -->
        <!-- card -->
    <div class="pay-card-cont" style="display: none">
        <form name="pay_form" id="pay_form" action="" method="post">
            <div class="pay-card-inner pay-card-right-off-inner">
                <h6>立即预约</h6>
                <ul class="order-pay-card-list clearfix">
                    <li>
                        <label for="clearing_alipay">
                            <input id="clearing_alipay" type="radio" name="paybank" value="alipay" class="J-paybank-radio hide">
                            <div class="order-pay-card-item pay-card-item-available">
                                <span class="order-pay-card-img">
                                     <span class="order-pay-icon pay-ali"></span>
                                </span>
                                <em class="pay-card-clicked"></em>
                            </div>
                        </label>
                    </li>
                    <li>
                        <label for="clearing_wechatpay">
                            <input id="clearing_wechatpay" type="radio" name="paybank" value="wxpay" class="J-paybank-radio hide">
                            <div class="order-pay-card-item pay-card-item-available">
                                <span class="order-pay-card-img">
                                     <span class="pay-wechat J-pay-wechat"><img src="./static/images/pay_wechat_zh-CN.png"></span>
                                </span>
                                <em class="pay-card-clicked"></em>
                            </div>
                        </label>
                    </li>
                    <li class="J-order-item-tips">
                        <label for="clearing_unionpay">
                            <input id="clearing_unionpay" type="radio" name="paybank" value="unionpay" class="J-paybank-radio J-clearing_unionpay hide">
                            <input type="hidden" id="J_unionpay_type" name="unionpay_type" value="1">
                            <div class="J-pay-card-tip-show order-pay-card-item pay-card-item-available" data-val="                       快捷支付指用户付款时，不需开通网银，只需提供银行卡卡号、户名、手机号码等信息，银行验证手机号码正确性后，第三方支付发送手机动态口令到用户手机号上，用户输入正确的手机动态口令，即可完成支付。                        ">
                                <span class="order-pay-card-img">
                                     <span class="order-pay-icon pay-online-01"></span>
                                </span>
                                <em class="pay-card-clicked"></em>
                                <span class="arrow-up"><i></i></span>
                            </div>
                        </label>
                    </li>
                    <li class="order-pay-card-item-last">
                        <label for="clearing_unionpay_online">
                            <input id="clearing_unionpay_online" type="radio" name="paybank" value="unionpay_online" class="J-paybank-radio hide">
                            <div class="J-pay-card-tip-show order-pay-card-item pay-card-item-available" data-val="使用网上银行支付，银行卡需事先开通网银支付功能，且在支付时完全是在银行网银页面输入银行卡信息并验证支付密码，具有稳定易用，安全可靠的特点。">
                                <span class="order-pay-card-img">
                                     <span class="order-pay-icon pay-unionpay"></span>
                                </span>
                                <em class="pay-card-clicked"></em>
                            </div>
                        </label>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <!-- card end -->
    <!-- paybtn -->
    <div class="order-pay-btn-cont">
        <a href="javascript:;" class="order-pay-btn" @click="paySubmit">立即预约</a>
        <a :href="'/order.html?orderId='+ orderId +'&room_type_id='+ orderInfo.room_type_id" class="return-back">返回修改订单</a>
        <div class="order-pay-loading" v-show="loading">
            <img src="./static/images/loading_order.gif">
            <span>正在加载支付信息，请稍等···</span>
        </div>
    </div>
    <!-- new end-->
</div>

<div class="order-pay-footer">
    <div class="main">
       <!-- <h6 class="order-pay-qa-title clearfix">常见问题</h6>
        <div class="order-pay-qa-list">
            <dl>
                <dt>1、重复支付多笔订单款怎么办？</dt>
                <dd>答：请您立刻拨打好巧客服核实重复支付情况，一经核实后，好巧网会将多支付款项原路退回。</dd>
                <dt>2、快捷支付失败，提示银行卡限额不足怎么办？</dt>
                <dd>答：银行卡限额是指某银行对该行银行卡单笔单日消费额度的限制，如果您的银行卡限额不足，您可以更换其他支付产品或线下充值好巧网预付款账户完成交易。</dd>
                <dt>3、支付页面打不开，或者打开无法支付，怎么办？</dt>
                <dd>答：由于网络超时或加载问题，请刷新页面重新支付，如果仍然无法支付，则联系好巧客服400-633-2377(仅中国大陆) ，+86 27 59006258(非中国大陆)。</dd>            </dl>
        </div>-->
    </div>
</div>

<div id="bg"></div>

<div class="index-popup new-index-popup-content hide" id="J_popup_timeout">
    <div class="index-popup-title">
        支付超时    </div>
    <div class="index-popup-cont">
        <div class="index-popup-cont-contianer dif jcc">
            <div class="common-remmend-tip dif aic">
                <i class="icon-timer common-va-m"></i>
                <span class="text-con f16 flex-1"> 支付有效时间已过，价格可能发生变化！</span>
            </div>
        </div>
        <div class="index-popup-btn-center order-del-pop-btn order-popup-footer dif jcc">
        </div>
    </div>
</div>
<!-- 套餐库存不足-begin -->
<div class="index-popup new-index-popup-content hide" id="J_popup_room">
    <div class="index-popup-title">
        套餐库存不足    </div>
    <div class="index-popup-cont">
        <div class="index-popup-cont-contianer dif jcc">
            <div class="common-remmend-tip dif aic">
                <i class="icon-timer common-va-t"></i>
                <span class="text-con f16 flex-1">很抱歉，您选择的优惠房型套餐已售罄，<br>请查看其他酒店或房型套餐<br><span class="size-14" id="J_property_noroom_tips"></span></span><br>
            </div>
        </div>
        <div class="index-popup-btn-center order-del-pop-btn order-popup-footer dif jcc">
        </div>
    </div>
</div>
<!-- 套餐库存不足-end -->
<!-- 重复预订提示-begin -->
<div class="index-popup new-index-popup-content hide" id="J_popup_order_repeat">
    <div class="index-popup-title">
        温馨提示    </div>
    <div class="index-popup-cont">
        <div class="index-popup-cont-contianer dif jcc">
            <div class="common-remmend-tip dif aic">
                <i class="icon-timer common-va-t"></i>
                <span class="text-con f16 flex-1">您已提交重复订单，请进入订单管理查看。<br>订单号：<span id="J_order_repeat"></span></span>
            </div>
        </div>
    </div>
    <div class="index-popup-btn-center order-del-pop-btn order-popup-footer dif jcc">
        <a href="javascript:;" class="index-popup-btn common-btn common-cancel-btns m-l-26 J_go_order_edit">返回修改信息</a>
    </div>
</div>
<!-- 重复预订提示-end -->

<!-- new popup-->
<!--wechat-->
<div class="index-popup new-index-popup-content hide" id="J_popup_wxpay" style="width:494px">
    <div class="pay-code-box">
        <div class="pay-code-header">
            <a href="javascript:;" class="close-pay-code-popup J_close_popup"><i class="order-pay-icon pay-close"></i></a>
        </div>
        <div class="pay-code-bd">
            <div class="pay-code-title clearfix">
                <span class="floatL">
                    <i class="pay-wechat"><img src="./static/images/pay_wechat_zh-CN.png"></i>
                </span>
                <span class="pay-code-time">
                    <i class="order-pay-icon time-count-down-icon"></i>剩余扫码有效时间：<span class="color-5256 font-bold J-time-count">14分17秒</span>                </span>
            </div>
            <div class="pay-code-bd-innder">
                <div class="pay-code-code">
                    <img src="https://www.haoqiao.com/cashier?param=-ZDNhN2Y0OGMxMmU2OTdkNSsnbXFhYStaJHgmMC44Nik&amp;order_sn=12004226216138&amp;order_type=1&amp;dud=459P7GcmUl9" alt="刷新页面获取二维码" width="282px" height="282px" id="J_wxpay_qrcode">
                </div>
                <div class="pay-code-foot">
                    <i class="order-pay-icon pay-zk-sq"></i>打开微信，扫一扫付款                </div>
            </div>
        </div>
    </div>
</div>
<!--alipay-->
<div class="index-popup new-index-popup-content hide" id="J_popup_alipay" style="width:494px">
    <div class="pay-code-box">
        <div class="pay-code-header">
            <a href="javascript:;" class="close-pay-code-popup J_close_popup"><i class="order-pay-icon pay-close J_pay_close"></i></a>
        </div>
        <div class="pay-code-bd">
            <div class="pay-code-title clearfix">
                <span class="floatL">
                    <i class="order-pay-icon pay-ali"></i>
                </span>
                <span class="pay-code-time">
                    <i class="order-pay-icon time-count-down-icon"></i>剩余扫码有效时间：<span class="color-5256 font-bold J-time-count">14分17秒</span>
                </span>
            </div>
            <div class="pay-code-bd-innder">
                <div class="pay-code-code">
                    <img src="https://www.haoqiao.com/cashier?param=-ZDNhN2Y0OGMxMmU2OTdkNSsnbXFhYStaJHgmMC44Nik&amp;order_sn=12004226216138&amp;order_type=1&amp;dud=459P7GcmUl9" width="282px" height="282px" id="J_alipay_qrcode">
                </div>
                <div class="pay-code-foot">
                    <i class="order-pay-icon pay-zk-sq"></i>打开手机支付宝，扫一扫付款                </div>
                <div class="pay-code-btn-for-ali-box">
                    支付遇到问题或企业支付宝账户付款<br>请转至<a href="javascript:;" class="pay-code-btn-for-ali">进入支付宝平台支付</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--timeout-->
<div class="index-popup new-index-popup-content hide" id="J_popup_timeout_02">
    <div class="index-popup-title">
        支付    </div>
    <div class="index-popup-cont">
        <div class="index-popup-cont-contianer dif jcc">
            <div class="common-remmend-tip dif aic">
                <i class="icon-timer common-va-m"></i>
                <span class="text-con f16 flex-1">请到新打开页面完成支付</span>
            </div>
        </div>
        <div class="index-popup-btn-center order-del-pop-btn order-popup-footer dif jcc">
            <a href="javascript:;" class="index-popup-btn common-btn common-confirm-btns" id="J_pay_succ">支付成功</a>
            <a href="javascript:;" class="index-popup-btn common-btn common-cancel-btns m-l-26" id="J_pay_fail">支付失败，继续支付</a>
        </div>
    </div>
</div>
<div class="index-popup new-index-popup-content hide" id="J_popup_nopay">
    <div class="index-popup-title">
        支付    </div>
    <div class="index-popup-cont">
        <div class="index-popup-cont-contianer dif jcc">
            <div>
                <div class="common-remmend-tip dif aic" style="text-align: left">
                    <i class="icon-timer common-va-m"></i>
                    <span class="text-con f16 flex-1">尚未收到银行或者第三方支付平台的支付确认</span>
                </div>
                <div class="pl62 t-666 f14">
                    为避免重复扣款，请您确认银行卡或者平台是否已经扣款<br>
                如果已经扣款，请联系客服。<br>
                •客服电话(仅中国大陆)：<i class="red_color">400-633-2377（7×24小时）</i><br>
                •客服电话(非中国大陆)：<i class="red_color">+86 27 59006258</i>                </div>
            </div>
        </div>
    </div>
    <div class="index-popup-btn-center order-del-pop-btn order-popup-footer dif jcc">
    </div>
</div>
<!--unbind-->

<div class="bg-f543">
    <div class="w">

    </div>
</div>
<script src="./static/js/entrance.js" id="zhichiScript" class="zhiCustomBtn" data-args="manual=true"></script>
<script type="text/javascript" src="./static/js/common.js"></script>
<script src="./js/lib/vue.js" type="text/javascript"></script>
<script src="./js/lib/element-ui/index.js" type="text/javascript"></script>
<script src="./js/order_wait.js" type="text/javascript"></script>
</body>
</html>